/* Transition Style For */
header,
.logo,
.social,
.social img,
.left,
.each-post,
.each-post img, 
.each-post span,
.posts-container,
aside,
#contents,
footer,
h1,
h2,
p { 
    transition:all .7s linear; 
    -o-transition:all .7s linear; 
    -moz-transition:all .7s linear; 
    -webkit-transition:all .7s linear;
}

@media (max-width: 760px) {	
	header {
		width: 100%;
	}
	
	.logo,
	.social {
		float: none;
		margin: auto;
	}
	
	.social {
		width: 100%;
		text-align: center;
		margin-top: 15px;
	}
	
	.social img {
		margin-left: 0px;
		margin-right: 6px;
	}
	
	.left {
		width: 520px;
		margin: auto;
		float: none;
	}
	
	.each-post {
		width: 93% !important;
		height: auto;
		float: none;
		margin: auto;
		margin-bottom: 15px;
		padding: 12px;
	}
	
	.each-post img{
		width: 99% !important;
	}
	
	.posts-container {
		width: 90% !important;
	}
	
	.each-post span {
		background-image: url(../images/post-text-bg.png);
		background-repeat: repeat;
		display: block;
		width: 55% !important;
		height: auto;
		padding: 18px;
	}
	
	.posts-container span {
		width: 90% !important;
	}
	
	aside {
		float: none;
		margin: auto;
		clear: both;
	}
	
	#contents {
		width: 100% !important;
	}
	
	footer {
		width: 100%;
	}
}

@media (max-width: 680px) {
	.each-post span {
		background-image: url(../images/post-text-bg.png);
		background-repeat: repeat;
		display: block;
		width: 60% !important;
		height: auto;
		padding: 18px;
	}
	
	.posts-container span {
		width: 90% !important;
	}
}

@media (max-width: 600px) {
	.each-post span {
		background-image: url(../images/post-text-bg.png);
		background-repeat: repeat;
		display: block;
		width: 70% !important;
		height: auto;
		padding: 18px;
	}
	
	.posts-container span {
		width: 90% !important;
	}
}

@media (max-width: 520px) {
	.left {
		width: 100%;
	}
	
	.posts-container span {
		width: 92% !important;
	}
	
	.posts-container{
		width: 95% !important;
	}
}

@media (max-width: 490px) {		
	.each-post span {
		width: 75% !important;
		margin-top: 18px;
	}
	
	.posts-container span {
		width: 90% !important;
	}
}

@media (max-width: 432px) {
	.logo {
		width: 320px;
	}
	
	.logo img {
		width: 320px;
	}
	
	p {
		font-size: 10px;
	}
	
	h2 {
		font-size: 12px;
	}
	
	.posts-container span {
		width: 90% !important;
	}
}

@media (max-width: 400px) {
	.each-post span {
		width: 75% !important;
		margin-top: 9px;
		margin-left: 12px;
	}
	
	.posts-container span {
		width: 85% !important;
		margin-left: 6px;
	}
}

@media (max-width: 350px) {	
	.each-post span {
		padding: 9px;
		width: 75% !important;
	}
	
	footer {
		text-align: center;
	}
	
	footer ul,
	footer p {
		text-align: center;
		float: none;
		margin: auto;
	}
	
	.posts-container span {
		width: 85% !important;
	}
}

@media (max-width: 320px) {
	.logo {
		width: 240px;
		height: auto;
	}
	
	.logo img {
		width: 240px;
	}
	
	.social img {
		width: 56px !important;
	}
	
	.each-post {
		width: 90% !important;
	}
	
	.each-post span {
		padding: 2px;
		margin-left: 9px;
		margin-top: 12px;
		width: 80% !important;
	}
	
	.posts-container span {
		width: 85% !important;
	}
}

@media (max-width: 280px) {
	.each-post span {
		width: 80% !important;
	}
	
	.posts-container span {
		width: 85% !important;
	}
}

@media (max-width: 260px) {
	.each-post span {
		width: 80% !important;
	}
	
	.posts-container span {
		width: 85% !important;
	}
}

@media (max-width: 240px) {
	.logo {
		width: 230px;
	}
	
	.logo img {
		width: 230px;
	}
	
	.each-post span {
		width: 80% !important;
		margin-top: 9px;
		margin-left: 9px;
	}
	
	.each-post span p {
		margin-top: 1px;
		padding: 1px;
		font-size: 9px;
	}
	
	.posts-container {
		width: 75%;
	}
	
	.posts-container span {
		width: 85% !important;
	}
}